<template>
  <div class="box">
    <h1>{{title}}</h1>
    <el-form
      :model="ruleForm2"
      status-icon
      :rules="rules2"
      ref="ruleForm2"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="用户名" prop="username">
        <el-input v-model="ruleForm2.username" placeholder="请输入您的用户名"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          type="password"
          v-model="ruleForm2.password"
          autocomplete="off"
          placeholder="请输入您的密码"
        ></el-input>
      </el-form-item>
      <el-form-item prop="captcha" class="captcha_box">
        <div v-html="svghtml.img" @click="getSvg" class="svg_box" title="点击更换验证码"></div>
        <el-input v-model="ruleForm2.captcha" placeholder="请输入图片验证码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-checkbox v-model="checked" class="cookies_box">7天内自动登录</el-checkbox>
        <el-button type="primary" @click="submitForm('ruleForm2')">登录</el-button>
        <router-link to="/register" class="el-button">注册</router-link>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import axios from "axios";
import Router from "vue-router";
import cookie from "js-cookie";
export default {
  mounted () {
    // 设置cookie
    this.ruleForm2.username = cookie.get("username");
    this.ruleForm2.password = cookie.get("password");
    this.getSvg();
  },

  data () {
    // 判断用户名
    var validateuserName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("用户名不能为空"));
      } else {
        var value = value.toString().trim();
        if (value == "") {
          return callback(new Error("用户名不能为空"));
        } else {
          callback();
        }
      }
    };
    // 判断密码
    var validatePass = (rule, value, callback) => {
      if (!value) {
        callback(new Error("不能为空或者小于六位"));
      } else {
        if (value == "" || value.length < 6) {
          callback(new Error("不能为空或者小于六位"));
        } else {
          callback();
        }
      }
    };
    // 判断图片验证码
    var checkCaptcha = (rule, value, callback) => {
      if (this.svghtml.text != value.toLowerCase()) {
        callback(new Error("图片验证码错误"));
      } else {
        callback();
      }
    };
    return {
      title: "登录页面",
      checked: true,
      svghtml: "",
      ruleForm2: {
        username: "",
        password: "",
        captcha: ""
      },
      rules2: {
        password: [{ validator: validatePass, trigger: "blur" }],
        username: [{ validator: validateuserName, trigger: "blur" }],
        captcha: [{ validator: checkCaptcha, trigger: "blur" }]
      }
    };
  },
  methods: {
    success () {
      this.$message({
        message: "登陆成功",
        type: "success"
      });
    },
    fault () {
      this.$message.error("用户名密码错误");
    },
    submitForm (formName) {
      var that = this;
      this.$refs[formName].validate(valid => {
        if (valid) {
          axios.post('api/login', this.ruleForm2).then(response => {
            if (response.data.status == 0) {
              cookie.set("token", response.data.token);
              cookie.set("role", response.data.role);
              cookie.set("username", that.ruleForm2.username);
              cookie.set("usericon", response.data.usericon);
              // 判断用户是否储存用户名和密码
              if (that.checked) {
                cookie.set("password", that.ruleForm2.password);
              }
              // 修改用户名 通过vuex共享用户数据
              that.$store.commit("changeUsername", {
                username: response.data.username,
                usericon: response.data.usericon,
                online: true,
                role: response.data.role,
                token: response.data.token
              });
              // 登陆后跳转到选择页面
              that.$router.push({ path: "select" });
              // 登录成功提示消息
              that.success();
            }
            // 登录失败提醒
            else if (response.data.status == 1) {
              that.fault();
            }
          })
        } else {
          return false;
        }
      });
    },
    getSvg () {
      axios.get('api/captcha').then(res => {
        this.svghtml = res.data;
      }).catch(error => {
        console.log(error)
      })
    }
  }
};
</script>
<style lang="stylus" scoped>
.box {
  min-width: 320px;
  max-width: 440px;
  max-height: 450px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: #f0f0f0;
  border-radius: 10px;
  padding-right: 40px;
}

.cookies_box {
  display: block;
}

h1 {
  font-size: 20px;
  color: #333;
  text-align: center;
  padding: 20px;
  margin-left: 40px;
}

from {
  width: 500px;
}

.register {
  display: block;
  background: #66b1ff;
  border-color: #66b1ff;
  color: #fff;
}

.svg_box {
  svg {
    width: 100% !important;
    height: 100% !important;
  }
}
</style>
